<template>
    <view>
        <view class="header ls-f-ajsb">
            <view class="ls-f-ac">
                <image src="../../../static/images/common_icon_school@2x.png"
                       mode=""
                       class="icon"></image>
                <text class="school">{{teacher.schoolName}}</text>
            </view>
            <view class="ls-f-column ls-f-ac"
                  @click="show=true">
                <image src="../../../static/images/commoon_icon_change@2x.png"
                       mode=""
                       class="change"></image>
                <text class="change-text">切换</text>
            </view>
        </view>
        <view class="card ls-f-ac ls-f-column">
            <view class="card-top ls-f-ajc ls-f-column">
                <view class="time">
                    上课时间
                </view>
                <view class="time">
                    {{schooltime||""}}
                </view>
            </view>
            <view class="box ls-f-column ls-f-ac"
                  @click="daka"
                  v-if="type==1">
                <view class=""
                      style="position: relative;">
                    <view class="ls-f-column ls-f-ac kaoqin">
                        <view class="title">考勤打卡</view>
                        <view class="time">{{h}}:{{m}}:{{s}}</view>
                    </view>
                    <image src="../../../static/images/dk_btn_dk_nor@2x.png"
                           @click="daka"
                           mode=""
                           class="img-big"></image>
                </view>
                <view class="ls-f-ajc bottom">
                    <image src="../../../static/images/common_icon_true@2x.png"
                           mode=""
                           class="change"></image>
                    <text class="change-text f-over"
                          style="max-width: 600rpx;">已进入考勤范围：{{address}}</text>
                </view>
            </view>

            <view class="box-2 ls-f-column ls-f-ac"
                  v-if="type==2">

                <image src="../../../static/images/kzt_pic_dkcg@2x.png"
                       mode=""
                       class="img-big-2"></image>
                <view class="ls-f-column ls-f-ajc bottom">
                    <view class="now">{{h}}:{{m}}:{{s}}</view>
                    <view class="now-text">打卡成功</view>
                </view>
            </view>
            <view class="box ls-f-column ls-f-ac"
                  v-if="type==3">
                <view class=""
                      style="position: relative;"
                      @click="getAddress">
                    <view class="ls-f-column ls-f-ac kaoqin">
                        <view class="title">考勤打卡</view>
                        <view class="time">{{h}}:{{m}}:{{s}}</view>
                    </view>
                    <image src="../../../static/images/dk_btn_dk_dis@2x.png"
                           mode=""
                           class="img-big"></image>
                </view>
                <view class="ls-f-ajc bottom">
                    <image src="../../../static/images/common_icon_dw@2x.png"
                           mode=""
                           style="width: 32rpx;height: 32rpx;margin-right: 5rpx;"></image>
                    <text class="change-text">{{address}}</text>
                </view>
                <view class="btn ls-f-ajc"
                      @click="getAddress">
                    重新定位
                </view>
            </view>

        </view>
        <view class="rest ls-f-ajsb"
              v-if="type==3"
              @click="getCode">
            <view class="ls-f-ac">
                <image src="../../../static/images/shop_pic_map@2x.png"
                       mode=""
                       class="address"></image>
                <view class=" ">
                    <view class="address-text-1">超出打卡范围，请重新定位</view>
                    <view class="address-text">仍无法打卡，请联系客服</view>
                </view>
            </view>
            <image src="../../../static/images/mine/mine_more_hui@2x.png"
                   mode="widthFix"
                   class="icon-c"></image>
        </view>
        <u-popup v-model="showCustomerQrCode"
                 width="80%"
                 border-radius="20"
                 mode="center">
            <view class="customer_box">
                <view class="title">提示</view>
                <image class="customer_code"
                       :src=" require('@/static/qrode.jpg')"
                       mode="" />
                <view class="title-1">请添加客服微信二维码</view>
                <u-button @click="saveImage"
                          type="primary"
                          :ripple="true"
                          shape="circle"> 保存到客服二维码 </u-button>
            </view>
        </u-popup>
        <u-select v-model="show"
                  :list="schoolList"
                  value-name="schoolId"
                  label-name="schoolName"
                  @confirm="confirmSchool"></u-select>
    </view>
</template>

<script>
var QQMapWX = require('@/common/utils/qqmap-wx-jssdk.min.js');
var qqmapsdk = new QQMapWX({
    key: '3TXBZ-2VXCP-NWFD7-VSNYY-NGU7T-WJB3Z'
})
export default {
    data() {
        return {
			schooltime:"",
            schoolList: [],
            show: false,
            type: 3,
            showCustomerQrCode: false,
            location: {},
            address: '',
            teacher: {},
            h: 0,
            m: 0,
            s: 0,

        }
    },

    onShow() {


        this.init()
		

    },
    onReady() {
        console.log(qqmapsdk);


    },
    methods: {
        confirmSchool(e) {
            console.log(e);
            this.teacher.schoolId = e[0].value
            this.teacher.schoolName = e[0].label
            this.getAddress()

        },
        daka() {
            this.$api.check({
                "address": this.address,
                // "id": this.teacher.id,
                "latitude": this.location.latitude,
                "longitude": this.location.longitude,
                "schoolId": this.teacher.schoolId,
                "schoolName": this.teacher.schoolName,
                "telNo": this.teacher.telNo,
                "userId": this.teacher.id,
                "userName": this.teacher.name
            }, (res) => {
                console.log(res);
                this.type = 2
            })
        },
        getTime() {
            let t = new Date()
            setInterval(() => {
                this.h = t.getHours()
                this.m = t.getMinutes()
                this.s = t.getSeconds()

            }, 1000)


        },
        getAddress() {
            console.log("阿阿斯顿撒")
            uni.getLocation({
                success: (res) => {
                    this.location = res
                    console.log(res);
                    qqmapsdk.reverseGeocoder({
                        latitude: res.latitude,
                        longitude: res.longitude,
                        success: (ress) => {
                            console.log(ress.result.address);

                            this.$api.currentClock({ latitude: res.latitude, longitude: res.longitude, schoolId: this.teacher.schoolId||this.schoolList[0].schoolId }, re => {
                                console.log(re.data);
                                if (re.data.length > 0) {
                                    this.type = 2
                                    console.log("已经打卡了兄弟")
                                } else {
                                    this.$api.judgeClock({ latitude: res.latitude, longitude: res.longitude, schoolId: this.teacher.schoolId }, r => {
                                        console.log(r.data);
                                        if (r.data == true) {
                                            this.type = 1
                                            console.log("rrrrr", r)
                                        } else {
                                            this.type = 3
                                        }
                                    })
                                }
								this.getschooltime();
                            })

                            this.address = ress.result.address
                        },
                        fail: (err) => {
                            console.log(err);

                        }
                    })

                },
                fail: (err) => {
					let _this = this;
					uni.getSetting({
						success(res) {
							var statu = res.authSetting;
					
							if (!statu['scope.userLocation']) {
								uni.showModal({
									title: '地理位置授权提示',
									content: '需要访问到您的位置，请到小程序的设置中打开位置，否则地址服务将无法正常使用！',
					
									success(tip) {
										if (tip.confirm) {
											uni.authorize({
											    scope: 'scope.userLocation',
											    success() {
											        uni.getLocation()
											    }
											})
											uni.openSetting({
												success(data) {
													console.log("reeeee",data)
													if (data.authSetting['scope.userLocation'] === true) {
														uni.showToast({
															title: '授权成功',
															icon: 'success',
															duration: 1000
														});
													}
												}
											});
										}
									}
								});
							}else{
								if(_this.location.latitude){
									
									_this.$api.currentClock({ latitude: _this.location.latitude, longitude: _this.location.longitude, schoolId: _this.teacher.schoolId||_this.schoolList[0].schoolId }, re => {
									    console.log(re.data);
									    if (re.data.length > 0) {
									        _this.type = 2
									        console.log("已经打卡了兄弟")
									    } else {
									        _this.$api.judgeClock({ latitude: _this.location.latitude, longitude: _this.location.longitude, schoolId: _this.teacher.schoolId }, r => {
									            console.log(r.data);
									            if (r.data == true) {
									                _this.type = 1
									                console.log("rrrrr", r)
									            } else {
									                _this.type = 3
									            }
									        })
									    }
										_this.getschooltime();
									})
								}
							}
						}
					});
                    console.log("定位没了", err)
                    // this.getAddress()
                }
            })
        },
        init() {
            this.$api.getTeacherInfo({}, res => {
                this.teacher = res.data
				this.getSchool()
               
                
            })


            this.getTime()

        },
		getschooltime(){
			this.$api.getschooltime({}, res => {
			  this.schooltime = res.data.schoolTime
			})
		},
        getSchool() {
            this.$api.getschool({}, res => {
                this.schoolList = res.data
				this.teacher=this.schoolList[0]
                // console.log(this.schoolList);
				// if (res.data.length != 0) {
				//     res.data.forEach((ele, index) => {
				//         if (ele.schoolId == '0') {
				//             res.data.splice(index, 1)
				//         }
				//     });
				//     this.schoolList = res.data
							 this.getAddress()	
				// }
            })

        },
        getCode() {
            this.showCustomerQrCode = true
        }
    }
}
</script>

<style scoped lang="scss">
.title-1 {
    margin-bottom: 20rpx;
}

.title {
    font-weight: bold;
    font-size: 35rpx;
}

.customer_box {
    text-align: center;
    padding: 30rpx;
    background-color: #fff;
    border-radius: 32rpx;

    .customer_code {
        width: 400rpx;
        height: 400rpx;
        margin: 30rpx 0 50rpx 0;
    }
}

.rest {
    width: 686rpx;

    background: #ffffff;
    margin: 32rpx;
    border-radius: 32rpx;
    padding: 32rpx;

    .address-text-1 {
        color: #333333;
        font-size: 32rpx;
        font-weight: bold;
    }

    .address-text {
        color: #999999;
        font-size: 24rpx;
    }

    .address {
        width: 94rpx;
        height: 94rpx;
        margin-right: 10rpx;
    }

    .icon-c {
        width: 32rpx;
        height: 32rpx;
    }
}

.btn {
    margin-top: 32rpx;
    color: #fff;
    width: 180rpx;
    height: 64rpx;
    background: #63b9f2;

    border-radius: 16rpx;
}

.box-2 {
    margin-top: 142rpx;

    .img-big-2 {
        width: 380rpx;
        height: 319rpx;
    }

    .now {
        color: #63b9f2;
        font-size: 64rpx;
        font-weight: bold;
    }

    .now-text {
        color: #63b9f2;
        font-size: 28rpx;
    }

    .bottom {
        margin-top: -80rpx;
    }
}

.bottom {
    margin-top: -30rpx;

    .change {
        margin-right: 10rpx;
    }
}

.box {
    position: relative;
    margin: 0 auto;
    margin-top: 190rpx;

    .kaoqin {
        position: absolute;
        top: 118rpx;
        left: 78rpx;

        .title {
            color: #ffffff;
            font-size: 48rpx;
            font-weight: bold;
        }

        .time {
            margin-top: 5rpx;
            color: #ffffff;
            font-size: 28rpx;
        }
    }

    .img-big {
        width: 340rpx;
        height: 448rpx;
    }
}

.time {
    font-size: 24rpx;
    color: #333;
}

.card {
    margin: 32rpx;
    width: 686rpx;
    height: 928rpx;
    background: #ffffff;

    border-radius: 32rpx;
    padding: 32rpx;

    .card-top {
        width: 622rpx;
        height: 106rpx;
        background: #f5f5f5;

        border-radius: 16rpx;
    }
}

.header {
    margin-top: 32rpx;
    padding: 32rpx;
    width: 686rpx;
    height: 156rpx;
    background: #ffffff;
    margin-left: 32rpx;
    border-radius: 32rpx;
}

.change-text {
    color: #999999;
    font-size: 24rpx;
}

.change {
    width: 33rpx;
    height: 33rpx;
}

.school {
    font-weight: 500;
    color: #333;
    font-size: 32rpx;
}

.icon {
    width: 92rpx;
    height: 92rpx;
    margin-right: 16rpx;
}
</style>
